<template>
  <div class="custom-dateRange_wrap" @click="handleClickEndDate">
    <el-date-picker
      ref="startDate"
      v-model="startDateModel"
      :clearable="startDateModel&&!endDateModel"
      :type="type"
      :format="format"
      :value-format="valueFormat"
      placeholder="开始日期"
      @change="handleStartDate"
    />
    <span class="rangeSeparator">{{ rangeSeparator }}</span>
    <el-date-picker
      ref="endDate"
      v-model="endDateModel"
      prefix-icon="none"
      :type="type"
      :format="format"
      :value-format="valueFormat"
      placeholder="结束日期"
      :disabled="!startDateModel"
      :picker-options="pickerOptions"
      @change="handleEndDate"
      @blur="endDateBlur"
    />
  </div>
</template>

<script>
// 自定义时间范围选择器
export default {
  props: {
    isMustEnd: { // 是否必须选择结束日期，如未选则会清空开始日期
      type: Boolean,
      default: false
    },
    isSame: { // 起始结束可否选同一天
      type: [String, Boolean],
      default: true
    },
    startDate: {
      type: [String, null],
      default: ''
    },
    endDate: {
      type: [String, null],
      default: ''
    },
    format: {
      type: String,
      default: 'yyyy/MM/dd'
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd'
    },
    type: {
      type: String,
      default: 'date'
    },
    rangeSeparator: {
      type: String,
      default: '至'
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate: time => time.getTime() < new Date(this.startDateModel).getTime() - (this.isSame ? 24 * 3600000 : 0)
      }
    };
  },
  computed: {
    startDateModel: {
      get() {
        return this.startDate;
      },
      set(v) {
        this.$emit('update:startDate', v); // :startDate.sync=""
      }
    },
    endDateModel: {
      get() {
        return this.endDate;
      },
      set(v) {
        this.$emit('update:endDate', v);
      }
    }
  },
  methods: {
    handleStartDate(e) {
      if (e) {
        if (this.endDateModel) {
          if (new Date(e).getTime() > new Date(this.endDateModel).getTime()) {
            this.endDateModel = '';
            this.$nextTick(() => this.$refs.endDate.focus());
          }
        } else {
          this.$nextTick(() => this.$refs.endDate.focus());
        }
      }
    },
    handleEndDate(e) {
      if (!e) {
        this.startDateModel = '';
      }
    },
    handleClickEndDate() {
      if (!this.startDateModel) {
        this.$nextTick(() => this.$refs.startDate.focus());
      }
    },
    endDateBlur({ valueOnOpen }) {
      if (this.isMustEnd && !valueOnOpen) {
        this.startDateModel = '';
      }
    }
  }
};
</script>

<style lang="scss">
.custom-dateRange_wrap {
  display: flex;
  border: 1px solid #dcdfe6;
  // border-radius: 4px;
  height: 28px;
  box-sizing: border-box;
  overflow: hidden;
  .el-input,.el-date-editor{
    width: 100%!important;
  }
  .el-input__inner {
    border: none;
  }
  .el-input.is-disabled .el-input__inner {
    background: transparent;
  }
   .el-date-editor:nth-child(1) {
    .el-input__inner {
      padding-right: 10px;
    }
  }
  .el-date-editor:last-child {
    .el-input__inner {
      text-align: right;
      padding-left: 10px;
    }
  }
  .rangeSeparator{
    color: rgba(0,0,0,.5);
  }
}
</style>
